body,div,h1,h2,p,ol,ul,li {
	margin:0;
	padding:0;
	border:0
}
@-webkit-viewport {
	width:device-width
}
@-moz-viewport {
	width:device-width
}
@-ms-viewport {
	width:device-width
}
@-o-viewport {
	width:device-width
}
@viewport {
	width:device-width
}
html,body {
	min-height:100%
}
body {
	min-width:290px;
	-webkit-font-smoothing:antialiased;
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
	text-size-adjust:100%;
	background:#444;
	color:#666;
	font:400 100%/1.5 "Helvetica Neue",Helvetica,Arial,sans-serif
}
h1 {
	font-size:3em;
	line-height:1;
	color:#222;
	margin-bottom:.5em;
	float:left;
	width:100%
}
h2 {
	float:left;
	width:100%;
	font-size:1.5em;
	color:#222;
	margin:1em 0 .5em
}
p {
	float:left;
	width:100%;
	margin-bottom:1em;
}
p.intro {
	font-size:1.25em;
	color:#555;
	font-weight:700
}
p.footer {
	font-size:1em;
	color:#555;
	font-weight:700
}
a {
	color:#aaaaaa;
	text-decoration:none
}
a:active,a:hover {
	outline:0
}
p  a {
	color: #AAA;
	text-decoration: underline
}
.main {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-overflow-scrolling:touch;
	padding:3em 4em;
	position:fixed;
	overflow:hidden;
	overflow-y:scroll;
	border-top-left-radius:5px;
	box-shadow:0 0 15px rgba(0,0,0,.6);
	top:.8em;
	right:0;
	bottom:0;
	width:76%;
	background:#fff
}
.main::-webkit-scrollbar {
	-webkit-appearance:none;
	background-color:rgba(0,0,0,.15);
	width:8px;
	height:8px
}
.main::-webkit-scrollbar-thumb {
	border-radius:0;
	background-color:rgba(0,0,0,.4)
}
#nav {
	position:absolute;
	width:24%;
	top:2em;
	left:0
}
#nav ul {
	display:block;
	width:100%;
	list-style:none
}
#nav li {
	width:100%;
	display:block
}
#nav a {
	color:#aaa;
	font-weight:700;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-transition:background .3s ease;
	-moz-transition:background .3s ease;
	transition:background .3s ease;
	text-shadow:0 -1px rgba(0,0,0,.5);
	border-bottom:1px solid rgba(0,0,0,.2);
	border-top:1px solid rgba(255,255,255,.1);
	display:block;
	padding:.6em 2em;
	width:100%
}
#nav a:hover {
	background:rgba(255,255,255,.1)
}
#nav .active a {
	color:#fff;
	background:rgba(0,0,0,.3)
}
#nav li:first-child a {
	border-top:0
}
#nav li:last-child a {
	border-bottom:0
}
#toggle {
	display:none
}
@media screen and (max-width:40em) {
	.js #nav {
	clip:rect(0 0 0 0);
	max-height:0;
	position:absolute;
	display:block;
	overflow:hidden
}
#nav {
	top:0;
	width:100%;
	position:relative
}
#nav.opened {
	max-height:9999px
}
#nav a:hover {
	background:transparent
}
#nav .active a:hover {
	color:#fff;
	background:rgba(0,0,0,.3)
}
#toggle {
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	display:block;
	width:70px;
	height:55px;
	float:right;
	margin:0 -2em 1em 0;
	text-indent:-9999px;
	overflow:hidden;
	background:#444 url("hamburger.gif") no-repeat 50% 33%
}
.main {
	-webkit-overflow-scrolling:auto;
	padding:0 2em 2em;
	border-radius:0;
	box-shadow:none;
	position:relative;
	width:100%;
	overflow:hidden
}
.main::-webkit-scrollbar {
	background-color:transparent
}
}@media screen and (-webkit-min-device-pixel-ratio:1.3),screen and (min--moz-device-pixel-ratio:1.3),screen and (-o-min-device-pixel-ratio:2 / 1),screen and (min-device-pixel-ratio:1.3),screen and (min-resolution:192dpi),screen and (min-resolution:2dppx) {
	body {
	-webkit-background-size:200px 200px;
	-moz-background-size:200px 200px;
	-o-background-size:200px 200px;
	background-size:200px 200px
}
#toggle {
	background-image:url("hamburger-retina.gif");
	-webkit-background-size:100px 100px;
	-moz-background-size:100px 100px;
	-o-background-size:100px 100px;
	background-size:100px 100px
}
}@media screen and (min-width:76em) {
	#nav {
	width:18em
}
.main {
	width:auto;
	left:18em
}
}